<template>
	<div id="">
		<el-row>
			<el-date-picker v-model="valueDate" type="daterange" align="right" format="yyyy-MM-dd" unlink-panels
				range-separator="至" start-placeholder="开始日期" end-placeholder="结束日期" :picker-options="pickerOptions">
			</el-date-picker>
			<el-select v-model="exception" placeholder="异常与否日志">
				<el-option :class="{redCls:item.red,greenCls:item.green}" v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
				</el-option>
			</el-select>
			<el-button type="primary" @click="conditionSearch()">筛选</el-button>
			
			<el-button type="primary" @click="allSearch()">查询所有</el-button>
		</el-row>


		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryWhere.currentPage" :page-sizes="[5,10, 15, 20, 30]" :page-size="pageInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.totalRecord">
		</el-pagination>

		<el-table :data="logList" style="width: 100%">
			<el-table-column type="expand">
				<template slot-scope="props">
					<el-form label-position="left" inline class="demo-table-expand" label-width="200px">
						<el-form-item label="详细信息">
							<span>{{ props.row.operator_info }}</span>
						</el-form-item>
					</el-form>
				</template>

			</el-table-column>
			<el-table-column label="操作时间" prop="operator_time">
			</el-table-column>
			<el-table-column label="操作方法" prop="operator_type">
			</el-table-column>
			<!-- <el-table-column label="操作信息" prop="operator_info">
			</el-table-column> -->
			<el-table-column label="异常信息" prop="exception_info">
				<template slot-scope="scope">
					<el-tag v-if="!scope.row.exception_info" type="success">无异常</el-tag>
					<el-tag v-else type="danger">{{scope.row.exception_info}}</el-tag>
				</template>
			</el-table-column>

			<!-- <el-table-column fixed="right" label="操作" width="100">
				<template slot-scope="scope">
					<el-button type="primary" @click="getOrderDetail(scope.row.order_code)">详情</el-button>
				</template>
			</el-table-column> -->
		</el-table>

		<el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
			:current-page="queryWhere.currentPage" :page-sizes="[5,10, 15, 20, 30]" :page-size="pageInfo.pageSize"
			layout="total, sizes, prev, pager, next, jumper" :total="pageInfo.totalRecord">
		</el-pagination>
	</div>

</template>

<style>
	//动态绑定颜色
	.redCls{
		color: red;
	}
	.greenCls{
		color: greenyellow;
	}
	.demo-table-expand {
		font-size: 0;
	}

	.demo-table-expand label {
		width: 90px;
		color: #99a9bf;
	}

	.demo-table-expand .el-form-item {
		margin-right: 0;
		margin-bottom: 0;
		width: 50%;
	}
</style>

<script>
	export default {
		created: function() {
			this.access_token = window.sessionStorage.getItem("token");
		},
		mounted() {
			this.initTableData();
		},
		methods: {
			conditionSearch() {
				console.log('conditionSearch')
				this.flag = 0;
				this.initTableData()
			},
			allSearch() {
				console.log('allSearch')
				this.flag = 1;
				this.initTableData()
			},
			initTableData: function() {
				console.log('执行了 initTableData方法')
				console.log('this.flag', this.flag)
				let _this = this;
				let url = "/api/mall/OperateLogServlet.do?method=query&access_token=" + this.access_token;
				if (this.valueDate != null) {
					this.start_date = this.valueDate[0];
					this.end_date = this.valueDate[1];
				}else{
					this.start_date = '';
					this.end_date = '';
				}
				if (this.flag == 1) {
					console.log('点击了查询所有会走到这里来')
					this.start_date = '';
					this.end_date = '';
					this.valueDate = '';
					this.exception ='';
				}
				this.$http.get(url, {
					params: {
						start_date: _this.start_date,
						end_date: _this.end_date,
						currentPage: _this.queryWhere.currentPage,
						flag: _this.flag,
						pageSize: _this.queryWhere.pageSize,
						exception:this.exception
					}
				}).then(function(response) {
					console.log("服务端返回的数据为:", response);
					if (response.data.code == 0) {
						_this.queryWhere.currentPage = response.data.data.currentPage;
						_this.pageInfo.totalPage = response.data.data.totalPage;
						_this.pageInfo.totalRecord = response.data.data.totalRecord;
						_this.pageInfo.pageSize = response.data.data.pageSize;
						_this.logList = response.data.data.data;
					} else {
						_this.$message(response.data.msg)
					}

				}).catch(function(error) {
					console.log("服务端产生异常为:", error);
					_this.$notify({
						title: '提示',
						message: "系统错误:" + error,
						duration: 2000
					});

				})
			},
			handleSizeChange: function(pageSize) {
				//alert("修改了每页显示的记录数",val);
				//console.log("修改了每页显示的记录数",val)
				this.queryWhere.pageSize = pageSize;
				this.initTableData(); //重新查数据库。。
			},
			handleCurrentChange: function(curPage) {
				this.queryWhere.currentPage = curPage; //当页页
				this.initTableData(); //重新查数据库。。
			}
		},
		data: function() {
			return {
				//查询条件是否有异常 默认查询有异常的信息 1
				exception:1,
				options: [{
					value: 1,
					label: '有异常',
					red:true,
					green:false
				}, {
					value: 0,
					label: '无异常',
					red:false,
					green:true
				}],
				pickerOptions: {
					shortcuts: [{
						text: '最近一周',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近一个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
							picker.$emit('pick', [start, end]);
						}
					}, {
						text: '最近三个月',
						onClick(picker) {
							const end = new Date();
							const start = new Date();
							start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
							picker.$emit('pick', [start, end]);
						}
					}],
				},
				//记录token
				access_token: "",
				queryWhere: {
					currentPage: 1,
					pageSize: 5
				},
				pageInfo: {
					pageSize: 5,
					totalPage: 0,
					totalRecord: 0
				},
				logList: [],
				valueDate: '',
				start_date: '',
				end_date: '',
				//标志是否查所有
				flag: 0
			}
		}
	}
</script>
